<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随便抽抽</title>
    <link rel="stylesheet" href="./iconfont.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/homepage.css">
</head>

<body>
    <script type="text/javascript">
        alert("本抽卡网页为静态网页，刷新即数据重置。\n建议抽卡前先查看概率一览确认抽卡规则。\n祝您欧气爆棚！\n（新的功能还在开发中，敬请期待！）\n（由于gitee静态网页加载速度慢，建议先打开“卡牌一览”加载角色图片。）");
    </script>

    <div class="content">
        <div class="poster">
            <!-- 
            <video class="poster_bg" loop="loop" muted="muted" autoplay="autoplay">
                <source src="./video/yshome.mp4" type="audio/mp4">
                "您的浏览器不支持播放此视频。"
            </video>
            -->
            <img class="poster_bg" src="./image/ysYouxi.png">
        </div>

        <div class="drawpage">
            <ul class="banner">
                <li class="banner_item">
                    <button id="rate_button" class="banner_button">概率一览</button>
                </li>
                <li class="banner_item">
                    <button id="card_button" class="banner_button">卡牌一览</button>
                </li>
                <li class="banner_item">
                    剩余次数：<span id="remain">1000</span>
                </li>
            </ul>
            <ul class="draw">
                <li class="draw_item">
                    <button id="once_button" class="draw_button">抽一次</button>
                </li>
                <li class="draw_item">
                    <button id="tentimes_button" class="draw_button">抽十次</button>
                </li>
            </ul>
        </div>

        <div class="ratepage" style="display: none;">
            <div class="ratepage_header">
                <button id="ratepage_cross_button" class="ratepage_button">
                    <span class="iconfont icon-cross-fill"></span>
                </button>
            </div>
            <div class="ratepage_content">
                <div class="ratepage_content_item">
                    <h4>活动详情</h4>
                    <p>假如全部限定角色都进有且只有角色的常驻池</p>
                    <p>1.该卡池抽卡时消耗抽卡次数。</p>
                    <p>2.每十次抽卡必得一张4星或以上角色，保底次数不与其他卡池共享，获得时保底机制将重新计数。通过保底获取4星的概率为99.40%，获取5星的概率为0.60%。</p>
                    <p>3.每九十次抽卡必得一张5星角色，保底次数不与其他卡池共享，获得时保底机制将重新计数。</p>
                </div>
                <div class="ratepage_content_item">
                    <h4>概率公示</h4>
                    <!-- 5星角色：23  4星角色：23  3星角色：23-->
                    <p>5星角色基础出率：0.60% | 4星角色基础出率：5.10% | 3星角色基础出率：94.30%</p>
                    <p>5星角色基础出率：0.60%</p>
                    <table class="ratepage_table">
                        <tr>
                            <th>稀有度</th>
                            <th>角色</th>
                            <th>稀有度</th>
                            <th>角色</th>
                        </tr>
                        <tr>
                            <td>5星</td>
                            <td>琴</td>
                            <td>5星</td>
                            <td>迪卢克</td>
                        </tr>
                        <tr>
                            <td>5星</td>
                            <td>七七</td>
                            <td>5星</td>
                            <td>莫娜</td>
                        </tr>
                        <tr>
                            <td>5星</td>
                            <td>刻晴</td>
                            <td>5星</td>
                            <td>温迪</td>
                        </tr>
                        <tr>
                            <td>5星</td>
                            <td>可莉</td>
                            <td>5星</td>
                            <td>达达利亚</td>
                        </tr>
                        <tr>
                            <td>5星</td>
                            <td>钟离</td>
                            <td>5星</td>
                            <td>阿贝多</td>
                        </tr>
                        <tr>
                            <td>5星</td>
                            <td>甘雨</td>
                            <td>5星</td>
                            <td>魈</td>
                        </tr>
                        <tr>
                            <td>5星</td>
                            <td>胡桃</td>
                            <td>5星</td>
                            <td>优菈</td>
                        </tr>
                        <tr>
                            <td>5星</td>
                            <td>枫原万叶</td>
                            <td>5星</td>
                            <td>神里绫华</td>
                        </tr>
                        <tr>
                            <td>5星</td>
                            <td>宵宫</td>
                            <td>5星</td>
                            <td>雷电将军</td>
                        </tr>
                        <tr>
                            <td>5星</td>
                            <td>珊瑚宫心海</td>
                            <td>5星</td>
                            <td>荒泷一斗</td>
                        </tr>
                        <tr>
                            <td>5星</td>
                            <td>申鹤</td>
                            <td>5星</td>
                            <td>八重神子</td>
                        </tr>
                        <tr>
                            <td>5星</td>
                            <td>神里绫人</td>
                        </tr>
                        
                    </table>
                    <p>（当未触发保底规则时，所有角色均分基础出率）</p>
                    <p>4星角色基础出率：5.10%</p>
                    <table class="ratepage_table">
                        <tr>
                            <th>稀有度</th>
                            <th>角色</th>
                            <th>稀有度</th>
                            <th>角色</th>
                        </tr>
                        <tr>
                            <td>4星</td>
                            <td>安柏</td>
                            <td>4星</td>
                            <td>凯亚</td>
                        </tr>
                        <tr>
                            <td>4星</td>
                            <td>丽莎</td>
                            <td>4星</td>
                            <td>芭芭拉</td>
                        </tr>
                        <tr>
                            <td>4星</td>
                            <td>雷泽</td>
                            <td>4星</td>
                            <td>香菱</td>
                        </tr>
                        <tr>
                            <td>4星</td>
                            <td>北斗</td>
                            <td>4星</td>
                            <td>行秋</td>
                        </tr>
                        <tr>
                            <td>4星</td>
                            <td>凝光</td>
                            <td>4星</td>
                            <td>菲谢尔</td>
                        </tr>
                        <tr>
                            <td>4星</td>
                            <td>班尼特</td>
                            <td>4星</td>
                            <td>诺艾尔</td>
                        </tr>
                        <tr> 
                            <td>4星</td>
                            <td>重云</td>
                            <td>4星</td>
                            <td>砂糖</td>
                        </tr>
                        <tr>
                            <td>4星</td>
                            <td>迪奥娜</td>
                            <td>4星</td>
                            <td>辛焱</td>
                        </tr>
                        <tr>
                            <td>4星</td>
                            <td>罗莎莉亚</td>
                            <td>4星</td>
                            <td>烟绯</td>
                        </tr>
                        <tr>
                            <td>4星</td>
                            <td>早柚</td>
                            <td>4星</td>
                            <td>九条裟罗</td>
                        </tr>
                        <tr>
                            <td>4星</td>
                            <td>托马</td>
                            <td>4星</td>
                            <td>五郎</td>
                        </tr>
                        <tr>
                            <td>4星</td>
                            <td>云堇</td>
                        </tr>
                    </table>
                    <p>（当未触发保底规则时，所有角色均分基础出率）</p>
                    <p>3星角色基础出率：94.30%</p>
                    <table class="ratepage_table">
                        <tr>
                            <th>稀有度</th>
                            <th>角色</th>
                            <th>稀有度</th>
                            <th>角色</th>
                        </tr>
                        <tr>
                            <td>3星</td>
                            <td>史莱姆</td>
                            <td>3星</td>
                            <td>大型史莱姆</td>
                        </tr>
                        <tr>
                            <td>3星</td>
                            <td>丘丘人</td>
                            <td>3星</td>
                            <td>丘丘暴徒</td>
                        </tr>
                        <tr>
                            <td>3星</td>
                            <td>丘丘王</td>
                            <td>3星</td>
                            <td>丘丘萨满</td>
                        </tr>
                        <tr>
                            <td>3星</td>
                            <td>深渊法师</td>
                            <td>3星</td>
                            <td>深渊使徒</td>
                        </tr>
                        <tr>
                            <td>3星</td>
                            <td>兽境幼兽</td>
                            <td>3星</td>
                            <td>兽境猎犬</td>
                        </tr>
                        <tr>
                            <td>3星</td>
                            <td>飘浮灵</td>
                            <td>3星</td>
                            <td>黯色空壳</td>
                        </tr>
                        <tr>
                            <td>3星</td>
                            <td>黑蛇骑士</td>
                            <td>3星</td>
                            <td>愚人众先遣队</td>
                        </tr>
                        <tr>
                            <td>3星</td>
                            <td>愚人众</td>
                            <td>3星</td>
                            <td>遗迹机关</td>
                        </tr>
                        <tr>
                            <td>3星</td>
                            <td>盗宝团</td>
                            <td>3星</td>
                            <td>野伏众</td>
                        </tr>
                        <tr>
                            <td>3星</td>
                            <td>海乱鬼</td>
                            <td>3星</td>
                            <td>骗骗花</td>
                        </tr>
                        <tr>
                            <td>3星</td>
                            <td>岩龙蜥</td>
                            <td>3星</td>
                            <td>深海龙蜥</td>
                        </tr>
                        <tr>
                            <td>3星</td>
                            <td>浮游水蕈兽</td>
                        </tr>
                    </table>
                    <p>（当未触发保底规则时，所有角色均分基础出率）</p>
                </div>
            </div>
        </div>

        <div class="cardpage" style="display: none;" >
            <div class="cardpage_header">
                <button id="cardpage_cross_button" class="cardpage_button">
                    <span class="iconfont icon-cross-fill"></span>
                </button>
            </div>
            <div class="cardpage_content">
                <ul class="cardpage_cat">
                    <li class="cardpage_cat_item">
                        <button id="cardpage_total_button" class="cardpage_content_button cardpage_content_button_active">全部</button>
                    </li>
                    <li class="cardpage_cat_item">
                        <button id="cardpage_five_button" class="cardpage_content_button">5星</button>
                    </li>
                    <li class="cardpage_cat_item">
                        <button id="cardpage_four_button" class="cardpage_content_button">4星</button>
                    </li>
                    <li class="cardpage_cat_item">
                        <button id="cardpage_three_button" class="cardpage_content_button">3星</button>
                    </li>
                </ul>
                <ul class="cardpade_char">
                    <li class="cardpage_char_item">
                        <div class="cardpage_char_wrap  cardpage_char_wrap_none">
                            <img src="./image/character/five/琴.png" class="cardpage_char_img">
                            <p class="cardpage_char_name">琴</p>
                            <p class="cardpage_char_num">0</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="drawalert" style="display: none;">
            <div class="drawalter_wrap">
                <div class="drawalert_header">
                    <button id="drawalert_cross_button" class="drawalert_button">
                        <span class="iconfont icon-cross-fill"></span>
                    </button>
                </div>
                <ul class="drawalert_content">
                    <li class="drawalert_item">
                        <div class="drawalert_item_wrap">
                            <img src="./image/character/five/琴.png" class="drawalert_item_img">
                                <p class="drawalert_item_name">琴</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./js/rate.js"></script>
    <script type="text/javascript" src="./js/character.js"></script>
</body>

</html>